<template>
<div class="pending-task-list" v-if="tabData.created">
  <xdh-list-panel 
    class="pending-task-panel"
    :fit="true"
    :load="listLoad" 
    :state="state"
    header-height="34px"
    footer-height="34px"
    :sizes="[5]" :size="5"
    :is-auto="true"
  >
    <template slot="tool">
      <el-button size="mini" type="primary">新增</el-button>
      <el-button size="mini" type="danger">批量操作</el-button>
    </template>
    <xdh-table v-if="tableCols.length" :data="state.list"
      :columns="tableCols" 
      height="100%" 
      border
      :auto-load="true"
      size="mini"
    >
    </xdh-table> 
  </xdh-list-panel>
</div>
</template>

<style lang="scss" scoped>
.pending-task-list{
  width: 100%;
  height: 100%;
  .pending-task-panel{
    /deep/ .xdh-list-panel__body{
      padding: 0;
      height: 100%;
      .xdh-layout__main{
        padding: 0 5px;
      }
    }
  }
}
</style>

<script>
import XdhListPanel from '@/widgets/xdh-list-panel'
import XdhTable from '@/widgets/xdh-table'
import {GET_PERSONS} from '@/base/types'
const INDEXCOL = { type: 'index', label: '序号', fixed: 'left', width: '80' }
const CONTROLCOL = { label: '操作', fixed: 'right', width: '100', prop: 'ctrl' }

export default {
  name: 'pendingTaskList',
  components: {
    XdhListPanel,
    XdhTable
  },
  props: {
    tabData: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      state: {
        list: [],
        total: 0
      },
      tableCols: []
    }
  },
  watch: {
  },
  methods: {
    listLoad(page, limit) {
      console.log(page, limit)
      return this.$store.dispatch(GET_PERSONS, {
        data: {
          pageSize: limit,
          pageIndex: page
        }
      }).then((res) => {
        console.log(res.list)
        this.state.total = res.total
        this.state.list = res.list
        this.tableCols = this._tableColumnInit(res.colData)
      })
    },
    _tableColumnInit(colData) { // 初始化列表头
      let contents = colData.map((item) => {
        return {
          label: item.label,
          prop: item.prop,
          showOverflowTooltip: true
        }
      })
      console.log([ INDEXCOL, ...contents, CONTROLCOL ])
      return [ INDEXCOL, ...contents, CONTROLCOL ]
    }
  },
  mounted() {
  }
}
</script>